<template>
    <div class="home-life">
        <div class="product">
            <swiper :show-desc-mask=false
                    :aspect-ratio="0.84"
                    dots-position="center"
                    auto
            >
            <swiper-item class="black swiper-demo-img" v-for="(bannerlistItem,index) in bannerList" :key="index">
                 <img class="title fadeInUp animated imgbox" :src="bannerlistItem" alt="">
            </swiper-item> 
            </swiper>
            <div class="pro-title">{{shopText.name}}</div>
            <div class="pro-subtitle">{{info}}</div>
            <div class="pro-price">￥{{shopText.price}}</div>
        </div>
        <div class="user-info" @click="goshopIndex(shopzs.id)">
            <div class="left-info" >
                <img :src="shopzs.shopImg" alt="">
                <div class="title">
                    <div class="big-title">{{shopzs.shopName}}</div>
                    
                </div>
            </div>
            <img class="right-icons" src="../assets/images/right-1.png" alt="">
        </div>
        <div class="user-diss">
            <div class="user-title vux-1px-b">
                <div class="left-content">用户评价：
                    <rater v-model="appraisesText.num" active-color="#845F3F" disabled></rater>
                </div>
                <div class="right-icon">共{{appraisesText.total}}条评价<img class="right-icons" src="../assets/images/right-1.png" alt=""></div>
            </div>
            <div class="diss-list" :class="idx != AppraisesList.length - 1 && 'vux-1px-b'" v-for="(item, idx) in AppraisesList" :key='idx'>
                <div class="user-header">
                    <div class="left">
                        <img :src="item.image" alt="">
                        <div class="user-name">{{item.nickname}}</div>
                    </div>
                    <div class="right">{{ item.createDateName}}</div>
                </div>
                <div class="diss-info">{{ item.content}}</div>
            </div>          
        </div>  
        <div class="pro-detail vux-1px-b">
            <div :class="d_o_c == 0 && 'active'" @click="d_o_c=0">产品详情</div>
            <div :class="d_o_c == 1 && 'active'" @click="popup()">规格参数</div>
        </div>    
        <div class="desc-title" v-html="shopzs.introduce"></div>
        <div class="box-all" v-for="(detailItem,index) in detailList" :key="index">
          <img :src="detailItem" alt="" >
        </div>
        <div>
            <popup v-model="popupShow">
                <div class="popup1">
                    <i class="fa fa-close" @click="close"></i>
                    <div class="product-info">
                        <div class="img"><img :src="shopText.logo" alt=""></div>
                        <div class="right">
                            <div class="select">{{info}}</div>
                            <div class="price">价格：{{price}}</div>
                            <!-- <div class="select">已选择：粉色90cm（建议1~2岁）</div> -->
                            
                        </div>
                    </div>
                    <div class="pro-color" v-for="(propertyListItem,bb) in propertyList" :key="bb">
                       <div class="title">{{propertyListItem.name}}</div>
                        <div class="color-list" >
                            <div class="item vux-1px" @click="getnum(fromatItem.id,indexs,bb,propertyListItem.id)"  
                            v-for="(fromatItem,indexs) in fromat[propertyListItem.id]"  :key="indexs" 
                            :class="{'active':indexs ==idx[bb]}"
                            >{{ fromatItem.name}}</div>
                        </div>
                    </div>
                    <div class="pro-color">
                        <div class="title">数量</div>
                        <x-number v-model="changeValue" :min="0"></x-number>
                    </div>
                    <div class="btn" @click="goRote">确定</div>
                </div>
            </popup>
        </div>
        <shopFooter 
        @goBuy="subBuy"  
        @goCar="subCar" 
        :shopId="shopzs.id"
        />   
    </div>
</template>
<script>
    import shopFooter from "@/components/shop-footer.vue" 
    import axios from '@/api/request'
    import { Swiper, Scroller, Popup, Rater, XNumber,SwiperItem } from 'vux'
    import { mapState, mapMutations, mapActions } from "vuex";
    export default {
        name: "home-life",
        data () {
            return {
                product: null,
                d_o_c: 0,
                idx: 0,
                banIndex: 0,
                popupShow: false,
                data3: 0,
                idx:[],
                changeValue: 1,
                bannerList: [],  
                detailList:[],   //详情
                info:"",         //描述,
                shopText:'',  
                shopzs:"",  //展示信息
                AppraisesList:[],
                appraisesText:{},
                propertyList:"",   //属性
                fromat:[],
                fromatOne:[],
                lengths:0,
                price:"",
                goId:"",
                subProductId:'',
                productLabels:[],  //标签属性拼接
                goodsId: '',
                _userId: '',
            }
        },
        components: {
            Swiper,
            shopFooter,
            Popup,
            Rater,
            XNumber,
            SwiperItem
        },
        created() {
            this.goodsId = this.$route.query.goodsId
            this._userId = this.$route.query.userId
            if(!this._userId){
                this._userId = this.userId
            }
            this.getGoodsBanner()
            this.getshopInfor()
            this.getAppraises()
            this.getproperty()  //获取规格
        },
        mounted() {

        },
        methods: {
            close(){
               this.popupShow =false;
            },
            popup () {
                this.popupShow = true;
                this.goId=''
                this.d_o_c=1
            },
            goshopIndex(id){   //跳转店铺首页
                this.$router.push({path: '/',query:{userId:this._userId,shopId:id}})
            },
            getGoodsBanner(){   //获取商品banner
                var self=this
                axios('/device/productDetail/get/'+this.$route.query.goodsId,'post',{}).then(res=>{
                    if(res.data.code==1000){
                        self.bannerList=res.data.data.banners
                        self.detailList=res.data.data.details
                        self.info=res.data.data.info
                     }
                })
            },
            getshopInfor(){   //获取商品信息  
               var self=this
                axios('/device/product/get/'+this.$route.query.goodsId,'post',{}).then(res=>{
                    if(res.data.code==1000){
                        self.shopText=res.data.data
                        self.price=self.shopText.price
                        self.shopzs=res.data.data.shop
                         console.log( res)
                     }
                })
            },
            getAppraises(){   //评论
                var self=this
                var data={
                    pageNumber: 1,
                    pageSize: 10,
                    param: {
                        type:2,
                        productId:this.$route.query.goodsId
                    }
                }
                axios('/device/appraises/listAll','post',data).then(res=>{
                    if(res.data.code==1000){
                        self.appraisesText=res.data.data
                        self.AppraisesList=res.data.data.list
                     }
                })
            },
             getproperty(){   
                let self=this  
                axios('/device/property/enableList/'+this.$route.query.goodsId,'post',{}).then(res=>{
                    if(res.data.code==1000){
                      self.propertyList=res.data.data
                      for(let i=0;i<self.propertyList.length;i++){
                        self.getformat(self.propertyList[i].id,i)
                     }
                    }
              })
            },
             getformat(id,i){    //规格    
                let self=this
                new Promise(function (resolve, reject) {
                
                    axios('/device/properLabel/showList/'+id,'post',{}).then(res=>{
                        if(res.data.code==1000){
                            self.lengths+=1
                            self.fromat[id]=self.fromat.concat(res.data.data)  //查出规格拼接
                            
                            //self.labelIds+=self.fromat[id][0].id    //id
                             resolve(self.lengths);
                        }
                    })
                }).then(function (lengths){
                    // if(lengths==self.propertyList.length){    //进来不执行函数
                    //   self.getnum()
                    // } 
                })
                
                
            },
            getnum(id,indexs,bb,bid){   //库存  
            let self=this
                this.idx[bb] = indexs
                this.idx = this.idx.concat([])  //一个新的数组不改变原新的数组
                this.getcheck(id,indexs,bb,bid)
                
            },
            getcheck(id,indexs,bb,bid){
                var self=this
                this.checktext=""
                var formatlist=self.fromat[self.propertyList[bb].id]   //获取分类的列表
                for(let iq=0;iq<formatlist.length;iq++){ 
                    if( formatlist[iq].checkout==true){
                    formatlist[iq].checkout=false
                    }
                    
                }
                self.fromat[self.propertyList[bb].id][indexs].checkout=true  //选中
                    
                self.getId(id,indexs,bb,bid)
            },
            getId(id,indexs,bb,bid){
                var self=this
                self.labelIds=""
                self.productLabels=[]
                for(let i=0;i<self.propertyList.length;i++){
                    for(let iq=0;iq<self.fromat[self.propertyList[i].id].length;iq++){ 
                    if( self.fromat[self.propertyList[i].id][iq].checkout==true){
                        self.labelIds+=self.fromat[self.propertyList[i].id][iq].id+","
                        self.productLabels.push(self.fromat[self.propertyList[i].id][iq].id)
                        }
                    }
                }
                    self.getNumber()
            },
            getNumber(){   //获取库存
                var self=this
            console.log(self.labelIds)
                axios('/device/subProduct/get/'+this.$route.query.goodsId+"/"+self.labelIds,'post',{}).then(res=>{
                    if(res.data.code==1000){
                        console.log(res)
                        this.price=res.data.data.price
                        this.stock=res.data.data.stock
                        self.subProductId =res.data.data.id
                    }
                    })
                
            },
            handleCollect() {  //处理收藏
                // let data = {
                //     goodsId:'c5233e3802214445986231ed12b0d863'
                // }
                // axios('/device/shopSecond/babyProduct','post',data).then(res=>{
                //     if(res.data.code==1000){
                //         console.log(res)
                        
                //     }
                // })
            },
            subBuy(c){  //去下单
               this.goId=c
               this.popupShow = true;
            },
            subCar(s){
               this.goId=s
               this.popupShow = true;
            },
            goRote(){   //加入购物车还是直接购买
                if(this.goId==''){
                    this.popupShow = false;
                }else if(this.goId==2){
                     this.buyNow()
                }else if(this.goId==1){
                     this.goCar()
                }
            },
            buyNow(){   //直接购买
               var self=this
               var data={
                    totalPrice:this.price*this.changeValue, //订单总金额
                    userId:this.$route.query.userId,                  //购买人（用户）ID
                    indentType:'1',            //订单类型   （1：商品购买  ）
                    productId:this.$route.query.goodsId,              //商品id
                    subProductId:self.subProductId ,         //子产品id
                    count:this.changeValue,             //商品数量
                    productLabels:self.productLabels
               }
               if(self.productLabels.length==0){
                 this.$vux.toast.text('请选择商品属性规格')
               }else{
               axios('/device/indent/placeOrder','post',data).then(res=>{
                    if(res.data.code==1000){
                       self.$router.push({ path:'/fill-order', query: {userId: self.$route.query.userId,goodsId:self.$route.query.goodsId,orderId:res.data.data}})
                    }
                 })
               }
            },
            goCar(){   //device/shopCar/create
                var self=this
               var data={
                    shopId:self.shopzs.id, //订单总金额
                    userId:this.$route.query.userId,                  //购买人（用户）ID
                    productId:this.$route.query.goodsId,              //商品id
                    count:this.changeValue,             //商品数量
                    productLabels:self.productLabels
               }
               console.log(self.productLabels)
               if(self.productLabels.length==0){
                 this.$vux.toast.text('请选择商品属性规格')
               }else{
                 console.log(data)
               axios('/device/shopCar/create','post',data).then(res=>{
                    if(res.data.code==1000){
                        console.log(res)
                       self.$router.push({ path:'/cart', query: {userId: self.$route.query.userId}})
                    }
                 })
                 }
            }
        }
    }
</script>
<style lang="less" scoped>
    @import "../assets/less/life.less";    
</style>
<style lang="less">
.desc-title{
    padding:20px;
    // background: #fff;
}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.vux-indicator.custom-bottom {
  bottom: 30px;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}
.swiper-demo-img img {
  width: 100%;
  min-height: 100%;
}
    .home-life {
        .vux-slider > .vux-indicator {
            bottom: 0;
            a {
                .vux-icon-dot.active {
                    background-color: #fff;
                    border: 1px solid #444;
                }
                .vux-icon-dot {
                    width: 8px;
                    height: 8px;
                    border-radius: 4px;
                }
            }
        }
        .weui-cell {
            padding: 0 !important;
            &:before {border: none;}
            .weui-cell__ft.vux-cell-primary {
                >div {float: left !important; height: 55/75rem;
                    a, input { height: 57/75rem; line-height: 37/75rem !important; width: 94/75rem; text-align: center;
                    }
                    a {
                        &:first-child { line-height: 27/75rem !important;  }
                    }
                    input { font-size: 30/75rem; }
                    .vux-number-selector svg {                        
                        fill: #444;
                        width: 15px;
                        height: 15px;
                    }
                    .vux-number-disabled svg {
                        fill: #888;                        
                        width: 15px;
                        height: 15px;
                    }
                }

            }
        }
        .vux-rater {
            margin-bottom: 10/75rem;
            .vux-rater-box {
                margin: 0 !important;
                .vux-rater-inner {
                font-size: 37/75rem;
            }
            }
            
        }
    }
    body .home-life .product .pro-subtitle{
        padding:0 40px;
    }
    .box-all{
        width:100%;
        img{
            width:100%;
            height:auto;
        }
    }
</style>

